<template>
  <div>
    <Row :gutter="16">
      <Col span="6">
        <div class="basic">
          <div >
            <span class="dt">基本信息</span>
            <span class="dd">{{row.name}} {{row.age}} 岁 {{row.gender}}</span>
            <Tag class=" ivu-ml-16" v-if="+row.in_hospital_status===1" color="primary">{{ `${+row.in_hospital_status === 1 ? '住院' : ''}` }}</Tag>
          </div>
          <div>
            <span class="dt">诊室</span>
            <span class="dd">{{row.clinic_name}}</span>
          </div>
          <div>
            <span class="dt">诊疗号</span>
            <span class="dd">{{row.patient_card_id}}</span>
          </div>
        </div>
        <div class="card">
          <div class="card_body" v-for="item in cardList" :key="item.id">
              <h4>剩余数</h4>
              <div class="cardlist">
                <div class="cardlistTitle">{{item.all_name}}</div>
                <div>{{item.drug_type_name}} {{item.surplus_num}}次</div>
                <div class="cardlistaction">
                  <a class="tive1" @click="modalAdd(item)" v-if="isAdd">新增</a>
                  <Divider type="vertical" />
                   <a class="tive2" @click="modaRend(item)" :disabled="item.surplus_num=='0'?true:false" v-if="isrund">停止医嘱</a>
                  <Divider type="vertical" />
                  <a class="tive3" @click="modalDelete(item)" :disabled="item.surplus_num!=='0'?true:false" v-if="isdelete">删除</a>
                </div>
              </div>
          </div>
        </div>
      </Col>
      <Col span="18">
        <Row
          type="flex"
          justify="start"
          :gutter="16"
          class="ivu-mt-8 ivu-mb-8"
        >
          <Col>
            <DatePicker
                v-model="searchForm.date"
                format="yyyy-MM-dd"
                type="daterange"
                transfer
                :clearable="true"
                placement="bottom-end"
                placeholder="请选择治疗日期"
                @on-change="askDatasDate"
                style="width: 200px"
            ></DatePicker>
          </Col>
          <Col>
            <Select style="width:100px" placeholder="输液类型" clearable  v-model="searchForm.drug_type" @on-change="changetype">
              <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Col>
          <Col>
            <Select style="width:200px" placeholder="请选择药品"  v-model="searchForm.surplus_id" clearable @on-change="changeDrug">
              <Option v-for="item in drugList" :value="item.id" :key="item.id">{{ item.all_name }}</Option>
            </Select>
          </Col>
          <Col>
            <Select style="width:100px" placeholder="操作类型" clearable v-model="searchForm.type" @on-change="changeCause">
              <Option v-for="item in clinicLists" :value="item.value" :key="item.value">{{ item.title }}</Option>
            </Select>
          </Col>
          <Col>
          <Button type="success" @click="changepro" v-if="isShow">配置项目</Button>
          </Col>
          <Col>
          <Button type="success" @click="changedisposal">开处置单</Button>
          </Col>
        </Row>
         <Table size="small" ref="table" :columns="columns" :data="data" :loading="loading"></Table>
        <div class="ivu-mt ivu-text-center">
          <Page :total="total" :current.sync="page" show-total show-elevator :page-size="pageSize"
              @on-change="changePage" :page-size-opts="pageOpts" show-sizer transfer
              @on-page-size-change="changePageSize" />
        </div>
      </Col>
      <!-- 配置项目 -->
      <Modal
        v-model="modalstatus"
        title="配置项目"
        width="960"
        @on-cancel="cancel(formDynamic)">
        <Form ref="formDynamic" :model="config_list" :rules='createRules'>
          <template v-for="(ops,index) in config_list.items" >
            <Row
              v-if="ops.show"
              type="flex"
              justify="start"
              :gutter="16"
              class="ivu-mt-8 ivu-mb-8"
              :key="index"
            >
              <Col class="radio">
                <RadioGroup v-model="ops.drug_type">
                    <Radio :label="1">静滴</Radio>
                    <Radio :label="2">肌注</Radio>
                </RadioGroup>
              </Col>
              <Col v-if="ops.drug_type==1">
                <FormItem  :prop="'items.' + index + '.water_type'" :rules="{required: ops.drug_id==''||ops.drug_id==undefined&&ops.drug_volume==null?true:false, message: '请选择', trigger: 'change',type:'number'}" >
                  <Select style="width:80px" placeholder="请选择" clearable v-model="ops.water_type" @on-change="changewater(ops)">
                    <Option v-for="item in waterList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col v-if="ops.drug_type==1">
                <FormItem  :prop="'items.' + index + '.water_volume'" :rules="{required: ops.drug_id==''||ops.drug_id==undefined&&ops.drug_volume==null?true:false, message: '剂量', trigger: 'blur',type:'number'}">
                  <InputNumber  :min="1" v-model="ops.water_volume"></InputNumber><span style="margin-left:5px">ml</span>
                </FormItem>
              </Col>
              <Col v-if="ops.drug_type==1">
                <FormItem  :prop="'items.' + index + '.drug_id'" :rules="{required:ops.water_type==''||ops.water_type==undefined&&ops.water_volume==null?true:false, message: '请选择药品', trigger: 'change'}">
                  <Select style="width:160px" placeholder="请选择药品"  v-model="ops.drug_id" clearable @on-change="acquisitionUnit(1,index,ops.drug_id)" @on-clear="changeClear(ops)">
                    <Option v-for="item in prodrugList" :value="item.id" :key="item.id">{{ item.drug_name }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col v-else>
                <FormItem  :prop="'items.' + index + '.drug_id'" :rules="{required:'true', message: '请选择药品', trigger: 'change'}">
                  <Select style="width:160px" placeholder="请选择药品"  v-model="ops.drug_id" clearable @on-change="acquisitionUnit(2,index,ops.drug_id)">
                    <Option v-for="item in prodrugList_jz" :value="item.id" :key="item.id">{{ item.drug_name }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col>
                <FormItem  :prop="'items.' + index + '.drug_volume'" :rules="{required:ops.water_type==''||ops.water_type==undefined&&ops.water_volume==null?true:false, message: '剂量',pattern:'^\d*(\.\d{0,2})?$', trigger: 'blur',type:'number'}">
                  <!-- <InputNumber  :min="1" v-model="ops.drug_volume"></InputNumber> -->
                  <InputNumber  :min="0" v-model="ops.drug_volume" @on-blur="changebulr(ops,ops.drug_volume)"></InputNumber>
                  <span style="margin-left:5px">{{ops.drug_unit}}</span>
                </FormItem>
                </Col>
              <Col>
               <FormItem  :prop="'items.' + index + '.operate_num'" :rules="{required:true, message: '请填写本次新增次数', trigger: 'blur',type:'number'}">
                  <span  style="margin-right:5px">本次新增次数</span>
                  <InputNumber  :min="1" v-model="ops.operate_num"></InputNumber><span style="margin-left:5px">次</span>
                </FormItem>
              </Col>
              <Col>
                <Button @click="handleRemove(index)">删除</Button>
              </Col>
            </Row>
          </template>
               <FormItem>
                    <Button type="dashed" icon="md-add" @click="addpush()">新增</Button>
                </FormItem>
              <FormItem label="备注">
                  <Input placeholder="请输入备注" v-width="500"  v-model="config_list.remark"  />
              </FormItem>
          </Form>
          <div slot='footer'>
              <Button @click='cancel(formDynamic)'>取消</Button>
              <Button type='primary'  @click='sumbitSave(formDynamic)'>确定</Button>
          </div>

      </Modal>
      <!-- 开处置单 -->
       <Modal
        v-model="modal"
        draggable
        title="开处置单"
        width="650"
        @on-ok="disposalSave"
        @on-cancel="oncancel()">
        <Table border ref="selection" :columns="tableColumns"  :data="tableData" @on-select-all="allSelect" @on-select-all-cancel="cancelAll"	 @on-selection-change="changeSelection">
          <template slot="option" slot-scope="{row}">
             <InputNumber  :min="1" :max="+row.surplus_num" v-model="row.num" @on-change="changeIput(row)"></InputNumber>
          </template>
        </Table>
         <Checkbox class="ivu-mt-8" v-model="single" @on-change="changesingle">打印处置单</Checkbox>
        </Modal>
      <!-- 新增 /退费-->
      <Modal
        v-model="addstatus"
        width="360"
        :title="modalTitle"
        @on-cancel="modalcancel(modalname)">
        <Form ref="modalname" :model="modalForm" :rules="ruleInline" inline>
          <div >
              <FormItem prop="operate_num">
                  <InputNumber  :min="1" v-model="modalForm.operate_num"></InputNumber>
                  <span style="margin-left:8px;margin-top:10px">剩余：{{modalForm.num}}</span>
                  <span  v-if="modalTitle==='停止医嘱'" style="margin-left:16px">可停：{{modalForm.can_refund}}</span>
              </FormItem>
              <FormItem label="备注" v-if="modalTitle!=='停止医嘱'">
                  <Input placeholder="请输入备注"  v-model="modalForm.remark"  />
              </FormItem>

            </div>
          <div style="margin-top:24px" v-if="modalTitle==='停止医嘱'">
            <FormItem prop="remark" label="备注" style="width:320px">
              <Input placeholder="请输入停止医嘱备注"  v-model="modalForm.remark"  />
            </FormItem>
          </div>
        </Form>
         <div slot='footer'>
              <Button @click='modalcancel(modalname)'>取消</Button>
              <Button type='primary' :loading="subloading" @click='modalSave(modalname)'>确定</Button>
          </div>
      </Modal>
      <!-- 打印处置单 -->
     <Modal v-model="printstatus" title="打印模板" @on-ok="printSave" @on-cancel="printCancel" width="1000">
          <div style="max-height:520px;overflow-y:auto">
            <div  ref="container">
              <div class="single">
                <div v-for="(item,index) in selectionList" :key="index " :class="index+1 === selectionList.length?'singleboxs':'singlebox'">
                    <div style="display:flex;padding-top:40px">
                      <h2 style="margin-top:0px">注射处置单</h2>
                      <div class="infobox">
                        <span>日期:</span>
                        <span> {{`${$Date(new Date()).format('YYYY-MM-DD HH:mm:ss')}`}}</span>
                      </div>
                    </div>
                    <div class="druginfo">
                      <div class="infobox" style="padding-left:0">
                        <div>姓名:</div>
                        <div style="font-size:24px" class="dragname">{{row.name}}</div>
                      </div>
                      <div class="infobox">
                        <div>性别:</div>
                        <div class="dragname" style="font-size:24px">{{row.gender}}</div>
                      </div>
                      <div class="infobox">
                        <div>年龄:</div>
                        <div class="dragname" style="font-size:24px">{{row.age}}</div>
                      </div>
                      <div class="infobox">
                        <div>诊室:</div>
                        <div class="dragname">{{row.clinic_name}}</div>
                      </div>
                      <div class="infobox">
                        <div>诊疗号:</div>
                        <div class="dragname">{{row.patient_card_id}}</div>
                      </div>
                    </div>
                    <div class="container" >
                      <div class="contbox dragname">药名、剂量</div>
                      <div  class="contbox dragname">用法</div>
                      <div  class="contbox dragname">次数</div>
                      <div  class="contbox dragname">医生签字</div>
                      <div  class="contbox dragname">核对者</div>
                      <template  v-for="(it,idx) in item" >
                          <div class="contbox dragname" :key="idx">
                            {{it.all_name}}
                            <!-- <div class="ml"><div>{{printdrug.drug_name}}</div><div>{{printdrug.drug_volume}}ml</div></div> -->
                          </div>
                          <div class="contbox dragname" >{{it.drug_type_name}}</div>
                          <div class="contbox dragname"  >{{it.num}}</div>
                          <div class="contbox "  ></div>
                          <div class="contbox"  ></div>
                      </template>
                    </div>
                </div>
            </div>
          </div>
        </div>
     </Modal>
    </Row>
  </div>

</template>

<script>
    import dayjs from 'dayjs'
    import { drugSurplus, drugrecordList, deletedrugSurplus, treatmentdrugSurplus, patientSurplus, surplusSelect, cardDrug, getdrugList } from '@/api/infusion.js'
    export default {
        props: {
            row: {
                type: '',
                default: false
            },
            clinicLists: {
                type: Array,
                default: []
            }
        },
        data () {
            return {
                formDynamic: 'formDynamic',
                modalname: 'modalname',
                subloading: false,
                isShow: false,
                isAdd: false,
                isrund: false,
                isdelete: false,
                searchForm: {
                    date: [],
                    drug_type: '',
                    surplus_id: '',
                    type: ''
                },
                ruleInline: {
                    operate_num: [{
                        required: true, message: '请输入次数', trigger: 'blur', type: 'number'
                    }],
                    remark: [
                        { required: true, message: '请输入备注', trigger: 'blur' }
                    ]
                },
                createRules: {

                },
                typeList: [
                    {
                        value: 1,
                        label: '静滴'
                    },
                    {
                        value: 2,
                        label: '肌注'
                    }
                ],
                waterList: [
                    {
                        value: 1,
                        label: '盐水'
                    },
                    {
                        value: 2,
                        label: '糖水'
                    }
                ],
                drugList: [],
                prodrugList: [],
                prodrugList_jz: [],
                causeList: [
                    {
                        value: 1,
                        label: '新增'
                    },
                    {
                        value: 2,
                        label: '治疗'
                    },
                    {
                        value: 3,
                        label: '停止医嘱'
                    }
                ],
                patient_id: '', // 患者id
                data: [],
                loading: false,
                total: 0,
                page: 1,
                pageSize: 10,
                pageOpts: [10, 20, 30, 50],
                columns: [
                    {
                        title: '项目名称',
                        key: 'all_name',
                        minWidth: 200
                    },
                    {
                        title: '输液',
                        key: 'drug_type_name',
                        width: 80
                    },
                    {
                        title: '时间',
                        key: 'created_at',
                        width: 200
                    },
                    {
                        title: '数量',
                        key: 'operate_num',
                        width: 80
                    },
                    {
                        title: '类型',
                        key: 'type_name',
                        width: 120
                    },

                    {
                        title: '备注',
                        key: 'remark',
                        width: 100,
                        tooltip: true
                    },
                    {
                        title: '操作人',
                        key: 'operate_name',
                        width: 100
                    }
                ],
                modalstatus: false,
                config_list: {
                    items: [{
                        drug_type: 1,
                        drug_volume: null,
                        drug_id: '',
                        water_type: '',
                        water_volume: null,
                        operate_num: 1,
                        show: true,
                        drug_unit: '',
                        remark: ''
                    }],
                    remark: ''
                },
                addstatus: false,
                modalTitle: '',
                cardList: [],
                modalForm: {
                    operate_num: null,
                    num: null,
                    remark: '',
                    can_refund: ''
                },
                // 开处置单
                tableColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '项目',
                        key: 'all_name'
                    },
                    {
                        title: '输液类型',
                        key: 'drug_type_name'
                    },
                    {
                        title: '次数',
                        slot: 'option'
                    }
                ],
                modal: false,
                tableData: [],
                single: true,
                selectionList: [],
                printstatus: false
            }
        },
        computed: {
        },
        mounted () {
            this.state = JSON.parse(localStorage.getItem('poweredit'));
            // console.log(this.state,'this.state')
            for (let item of this.state) {
                if (item.name === '输液大厅配置项目') {
                    this.isShow = item.bool
                } else if (item.name === '输液大厅新增') {
                    this.isAdd = item.bool
                } else if (item.name === '输液大厅退费') {
                    this.isrund = item.bool
                } else if (item.name === '输液大厅删除') {
                    this.isdelete = item.bool
                }
            }
        },
        methods: {
            changeClear (val) {
                // console.log(val, 'qq')
            },
            changewater (val) {
                // console.log(val)
                // console.log(val.water_type == '', 'qqq')
            },
            changebulr (ops, value) {
                //  console.log(value,'value',ops,'ops')
                // ops.drug_volume = value.toFixed(2) * 1 //四舍五入
                ops.drug_volume = Math.floor(value * 100) / 100
            },
            // 获取单位
            acquisitionUnit (num, index, id) {
                let items = this.config_list.items[index]
                if (num === 1) {
                    this.prodrugList.forEach(item => {
                        if (item.id === id) {
                            items.drug_unit = item.drug_unit
                        }
                    })
                } else {
                    this.prodrugList_jz.forEach(item => {
                        if (item.id === id) {
                            items.drug_unit = item.drug_unit
                        }
                    })
                }
            },
            initial (row) {
                this.patient_id = row.id
                this.getdrugrecordList()
                this.getsurplusSelect()
                this.getcardDrug()
                this.getdrugList()
            },
            // 获取药品
            getsurplusSelect () {
                surplusSelect({ patient_id: this.patient_id }).then(res => {
                    this.drugList = res
                })
            },
            getdrugList () {
                getdrugList({ patient_id: this.patient_id }).then(res => {
                    this.prodrugList = res.drug_list_jd
                    this.prodrugList_jz = res.drug_list_jz
                })
            },
            changetype () {
                this.getdrugrecordList()
            },
            changeDrug () {
                this.getdrugrecordList()
            },
            changeCause () {
                this.getdrugrecordList()
            },
            askDatasDate () {
                this.getdrugrecordList()
            },
            changePage (page) {
                this.page = page;
                this.getdrugrecordList()
            },
            changePageSize (pagesize) {
                this.pageSize = pagesize;
                this.getdrugrecordList()
            },
            // 获取患者列表
            getdrugrecordList () {
                const params = {
                    start_time: this.searchForm.date[0] ? dayjs(this.searchForm.date[0]).format('YYYY-MM-DD') : '',
                    end_time: this.searchForm.date[1] ? dayjs(this.searchForm.date[1]).format('YYYY-MM-DD') : '',
                    drug_type: this.searchForm.drug_type,
                    surplus_id: this.searchForm.surplus_id,
                    type: this.searchForm.type,
                    patient_user_id: this.patient_id,
                    page: this.page,
                    pageSize: this.pageSize
                }
                drugrecordList(params).then(res => {
                    this.data = res.list
                    this.total = res.total
                })
            },

            changepro () {
                this.modalstatus = true
            },
            addpush () {
                this.config_list.items.push(
                    {
                        drug_type: 1,
                        drug_volume: null,
                        drug_id: '',
                        water_type: '',
                        water_volume: null,
                        operate_num: 1,
                        show: true,
                        drug_unit: '',
                        remark: ''
                    }
                )
            },
            handleRemove (index) {
                // this.config_list.items.splice(index,1)
                this.config_list.items[index].show = false
            },
            // 配置项目保存
            sumbitSave (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.config_list.items.forEach(item => {
                            item.remark = this.config_list.remark
                        })
                        const params = {
                            patient_user_id: this.patient_id,
                            config_list: this.config_list.items.filter(item => item.show === true)
                        }
                        drugSurplus(params).then(res => {
                            this.$Message.success('配置成功')
                            this.cancel(name)
                            this.getcardDrug()
                            this.getdrugrecordList()
                        })
                    }
                })
            },
            cancel (name) {
                this.$refs[name].resetFields();
                this.modalstatus = false
                this.config_list = {
                    items: [{
                        drug_type: 1,
                        drug_volume: null,
                        drug_id: '',
                        water_type: '',
                        water_volume: null,
                        operate_num: 1,
                        show: true,
                        drug_unit: '',
                        remark: ''
                    }]
                }
            },
            // 获取card
            getcardDrug () {
                cardDrug({ patient_id: this.patient_id }).then(res => {
                    this.cardList = res;
                    this.tableData = res.map(el => ({
                        num: null, _disabled: true, ...el
                    }))
                    this.tableData = this.tableData.filter(item => +item.surplus_num !== 0)
                })
            },
            // 新增退费
            modalAdd (row) {
                this.modalForm.num = row.surplus_num
                this.$set(this.modalForm, 'drug_surplus_id', row.id)
                this.addstatus = true
                this.modalTitle = '新增'
            },
            modaRend (row) {
                this.modalForm.num = row.surplus_num
                this.modalForm.can_refund = row.can_refund
                this.$set(this.modalForm, 'drug_surplus_id', row.id)
                this.addstatus = true
                this.modalTitle = '停止医嘱'
            },
            modalSave (name) {
                const data = {
                    patient_user_id: this.patient_id,
                    operate_num: this.modalForm.operate_num,
                    drug_surplus_id: this.modalForm.drug_surplus_id,
                    remark: this.modalForm.remark
                }
                if (this.modalTitle === '新增') {
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            patientSurplus(data).then(res => {
                                this.$Message.success('新增成功')
                                this.modalcancel(name)
                                this.getcardDrug()
                                this.getdrugrecordList()
                            })
                        }
                    })
                } else {
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            treatmentdrugSurplus(data).then(res => {
                                this.$Message.success('停止医嘱成功')
                                this.modalcancel(name)
                                this.getcardDrug()
                                this.getdrugrecordList()
                            })
                        }
                    })
                }
            },
            modalcancel (name) {
                this.$refs[name].resetFields();
                this.addstatus = false
                this.modalForm = {
                    operate_num: null,
                    num: null,
                    remark: ''
                }
            },
            modalDelete (row) {
                const param = {
                    drug_surplus_id: row.id,
                    patient_user_id: this.patient_id
                }
                this.$Modal.confirm({
                    title: '删除提示',
                    content: '是否确认删认此项目!',
                    onOk: () => {
                        this.deleteSubmit(param);
                    }
                });
            },
            deleteSubmit (params) {
                deletedrugSurplus(params).then(() => {
                    this.$Message.success(' 删除成功');
                    this.getcardDrug()
                    this.getdrugrecordList()
                })
            },
            // 开处置单
            changesingle (e) {
                this.single = e
            },
            changeIput (e) {
                if (e.num > +e.surplus_num) {
                    this.$Message.warning('次数不可大于当前项目的剩余数')
                }
                if (e.num > 0) {
                    this.tableData.forEach(el => {
                        if (e.id === el.id) {
                            el._disabled = false
                            el.num = e.num
                        }
                    });
                }
                // console.log(e, 'e')
            },
            allSelect (section) {
                // console.log(section,'s')
                this.selection = section
            },
            cancelAll (section) {
                this.selection = section
            },
            changeSelection (section) {
                this.selection = section
                console.log(this.selection, 'selection')
            },
            changedisposal () {
                this.tableData = []
                this.modal = true
                this.getcardDrug()
                this.selection = []
                this.single = true
            },
            disposalSave () {
                if (this.selection.length === 0 || !this.single) {
                    this.printstatus = false
                } else {
                    this.selectionList = []
                    if (this.selection.length > 4) {
                        let n = 4
                        for (var i = 0; i < this.selection.length; i += n) {
                            this.selectionList.push(this.selection.slice(i, i + n));
                        }
                    } else {
                        this.selectionList = [this.selection]
                    }
                    console.log(this.selectionList)
                    this.printstatus = true
                }
            },
            oncancel () {
                this.modal = false
                this.tableData = []
            },
            // 打印处置单
            printSave () {
                this.$Print(this.$refs.container);
                this.selection = []
            },
            printCancel () {
                this.tableData = []
                this.selection = []
            }
        }

    }
</script>

<style lang="less" scoped>
.basic{
  line-height: 32px;
  width: 100%;
  height: 125px;
  padding: 16px;
  border: 1px solid #dcdee2;
  margin-bottom: 12px;
}
.dt{
  width: 30%;
    float: left;
    color: #777;
}
.dd{
  font-weight: bolder;
}
.card{
  border: 1px solid #dcdee2;
  border-color: #e8eaec;
}
.card_body{
  padding: 16px;
}
.cardlist{
  padding: 12px 0;
  border-bottom: 1px solid #e8eaec;
}
.cardlistTitle{
      margin-bottom: 12px;
    color: rgba(0,0,0,.85);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}
.cardlistaction{
  margin-top: 16px;
}
.tive1{
  padding-right: 8px;
}
.tive2{
  padding:0 8px;
}
.tive3{
   padding-left: 8px;
}
.radio{
  line-height: 25px;
}
// 打印
.single{
  color: #000;
//   width: 830px;
//   height:520px;
  // border: 2px solid #000;
  padding: 24px 0 24px 24px;
  font-size: 18px;
  position: relative;
  font-family:'Microsoft YaHei';
}
.container {
  display: grid;
  grid-template-columns: 350px 90px 60px 120px 120px;
  grid-template-rows: 35px 50px 50px 50px 50px;
  // border: 1px solid #000;
  vertical-align:middle;
  text-align: center;
}
.druginfo{
  margin-bottom: 20px;
  font-family: 'Microsoft YaHei';
  display: flex;
  justify-content: flex-start;
}
.contbox{
    border: 1px solid black;
    margin-left: -1px;
    margin-top: -1px;
    padding: 6px 0;
    word-wrap: break-word;
    display: flex;
    justify-content: center;
    align-items: center;
}
.drugline{
  text-align: left;
  padding: 0 10px;
}
.ml{
    width: 100%;
  display: flex;
  justify-content: space-between;
}
.singleboxs{
    max-height: 520px;
    margin: 10px;
}
.singlebox{
    height: 520px;
    margin: 10px;
}
.infobox{
  display: flex;
  align-items: center;
  padding: 9px 20px;
}
</style>
